<template>
    <el-container class="home-box">
        <el-aside :style="isCollapse ? 'width: 66px' : 'width:241px'">
            <div class="logo">
                <img src="../assets/imgs/shop.png" alt="" srcset="" />
                <span v-show="!isCollapse">电商管理系统</span>
            </div>
            <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :unique-opened="true"
                :router="true"
                :collapse="isCollapse"
                :collapse-transition="false"
                :default-active="$route.path"
            >
                <el-submenu
                    v-for="main in menus"
                    :index="main.authName"
                    :key="main.id"
                >
                    <template slot="title">
                        <i :class="icons[main.id]"></i>
                        <span>{{ main.authName }}</span>
                    </template>
                    <el-menu-item
                        v-for="sub in main.children"
                        :index="'/' + sub.path"
                        :key="sub.id"
                    >
                        <i :class="icons[sub.id] || 'el-icon-menu'"></i>
                        <span>{{ sub.authName }}</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <el-button
                    class="el-icon-s-fold"
                    size="mini"
                    @click="isCollapse = !isCollapse"
                ></el-button>
                <el-dropdown>
                    <div class="header-user">
                        <img src="../assets/imgs/user.gif" alt="" srcset="" />
                        <span>欢迎用户:{{ user.username }}</span>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="loginOut()"
                            >退出登录</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main ref="mainPage">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="name in $route.meta.title" :key="name">{{ name }}</el-breadcrumb-item>
                </el-breadcrumb>
                <router-view class="content-box" :h="mainPageHeight"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { getMenus } from "../api/roles.js";
export default {
    data() {
        return {
			mainPageHeight:0,
            isCollapse: false,
            user: {},
            menus: [],
            icons: {
                101: "iconfont icon-shangpin",
                102: "iconfont icon-danju",
                103: "iconfont icon-tijikongjian",
                201: "iconfont icon-shouye",
                202: "iconfont icon-baobiao",
                125: "iconfont icon-users",
            }
        };
    },
    methods: {
		initTableHeight(){
            // console.log(this.$refs.mainPage.$el.clientHeight)
			this.mainPageHeight = this.$refs.mainPage.$el.clientHeight;
		},
        loadUserInfo() {
            this.user = JSON.parse(sessionStorage.getItem("user"));
        },
        loginOut() {
            sessionStorage.removeItem("user");
            this.$router.push("/login");
        },
        async loadMenus() {
            let menus = await getMenus();
            if (!menus) return;
            this.menus = menus;
        },
    },
    created() {
        this.loadUserInfo();
        this.loadMenus();
    },
	mounted() {
		this.initTableHeight();
	},
};
</script>

<style lang="less" scoped>
.home-box {
    height: 100%;
}
.el-aside {
    // width: 241px !important;
    border-right: solid 1px #e6e6e6;
    background-color: #545c64;
    transition: all 0.2s ease;
    .logo {
        height: 60px;
        padding: 10px;
        box-sizing: border-box;
        background-color: @bg-color-gr;
        box-shadow: 0 1px 4px @bg-color-d-o;
        white-space: nowrap;
        overflow: hidden;
        img {
            height: 40px;
            width: 40px;
            vertical-align: middle;
        }
        span {
            color: @font-w;
            font-size: 20px;
            vertical-align: middle;
            padding-left: 10px;
        }
    }
}
.el-menu {
    border-right: none;
    .iconfont {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        display: inline-block;
    }
}
.el-header {
    box-shadow: 0 1px 4px @bg-color-d-o;
    display: flex;
    flex-flow: row nowrap;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
}
.header-user {
    img {
        height: 40px;
        width: auto;
        vertical-align: middle;
        margin-right: 6px;
        border-radius: 6px;
    }
}
.el-main {
    background-color: @bg-color-lin;
    margin-top: 4px;
    padding: 20px;
}
.content-box {
    margin-top: 20px;
}
</style>
